<template>
  <div class="home">
    <!-- 顶部搜索栏 -->
    <div class="home-nav">
      <input-nav @nav-tab="$router.push({name: 'SearchMusic'})"
      @nav-show="showPersonal"></input-nav>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="banner-item">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerImgs" :key="index">
            <img :src="item.pic" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 音乐列表 -->
    <div class="home-list">
      <div class="home-title title">
        <lemon-title>
          <span>推荐歌单</span>
        </lemon-title>
      </div>
      <!-- 推荐歌单列表 -->
      <div class="content-box">
        <div class="content" @click="getSongdetailFun(item.id)" v-for="(item, index) in musicList" :key="index">
          <div class="top-box">
            <span class="icon"></span>
            <span class="count">{{ item.playCount | playCountNum }}</span>
          </div>
          <div class="image-box">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="title-box">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="home-context">
      <div class="home-title title">
        <lemon-title>
          <span>最新音乐</span>
        </lemon-title>
      </div>
      <div class="context-item">
          <ul class="context-ul">
            <li class="context-li" v-for="(item,index) in newSong" :key="item.id" >
              <div class="context-img" :style="'background-image:url('+item.picUrl+');'"></div>
              <div class="context-p">
                <p>{{item.name}}
                  <span>-{{item.song.artists[0].name}}
                  </span>  
                </p>
                <span>{{item.alg}}</span>
              </div>
              <div class="context-btn" @click="setId(item.id,newSong)">
                <i :class="['fa' ,'fa-youtube-play',indexs==index ? 'active':'']" aria-hidden="true"></i>
              </div>
            </li>
          </ul>
      </div>
    </div>
    <!-- 最新MV -->
    <div class="swiper-home">
      <lemon-title class="swiper-mv title">
        <span>最新MV</span>
      </lemon-title>
      <div class=" swiper-mvbox">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide-item" v-for="(item,index) in musicListMv"
                :key="item.id"
               >         
              <div
                class="list-item"               
              >
                <div class="list-item-box">
                  <div class="list-item-img" >
                    <img :src="item.cover" alt="" />
                    <span class="item-img-span iconfont icon-bofang " @click.stop="setMvUrlFun(item.id,index)"></span>
                  </div>
                  
                  <div class="one-text list-item-txt">
                    <span>{{ item.artistName }} | {{ item.name }}</span>
                  </div>
                </div>
              </div>
           
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-count"></div>
        
      </div>
    </div>
    <!-- 最新电台 -->
    <div class="home-dj">
      <lemon-title class="title lemon-title">
        <span>热门电台</span>
      </lemon-title>
      <div>
        <div class="home-dj-box">
        <div class="home-dj-item" v-for="(item,index) in musicListDj" :key="item.id" v-show="index<6" >
          <div class="dj-img">
            <img class="auto-img" :src="item.picUrl" alt="">
          </div>
          <p class="dj-txt">{{item.name}}</p>
        </div>
      </div>
      </div>
    </div>
    <div>
      <!-- 个人 更多 -->
      <div class="personal" v-show="bool">
        <personal @nav-page="bool=false"></personal>
      </div>
    </div>
    <player :playerId="playerId" :listId="listId" v-show="playerId" @item-out="musicOut"></player>
  </div>
</template>

<script>
//顶部搜索栏组件
import InputNav from "../components/home/InputNav.vue";
//音乐标题
import LemonTitle from "../components/public/LemonTitle.vue";
import Personal from "../components/home/Personal.vue";
import Player from "@/components/public/Player.vue"

//导入请求数据函数
import {
  getBanner,
  getPersonalized,
  getPersonalizedMv,
  getDjHot,
  getNewsong, 

} from "../api/recommend";
import Swiper from "swiper";
export default {
  name: "Home",
  components: {
    //顶部搜索组件
    InputNav,
    LemonTitle,
    Personal,
    Player
  },

  data() {
    return {
      //轮播图
      bannerImgs: [],
      //音乐列表
      musicList: [],
      //MV
      musicListMv: [],
      //电台
      musicListDj:[],
      //显示个人中心
      bool:false,
      //最新音乐
      newSong:[],
      playerId:null, //歌曲列表的id 传给player组件的参数
      indexs:null, // 点击歌曲列表获取下标
      listId:null,//歌单的id 给player组件传递的参数
      playNum:null, //是否播放mv标志
    };
  },
  //过滤器
  filters: {
    //过滤歌曲数量
    playCountNum(value) {
      let m = value > 10000 ? value / 10000 : value;
      let y = m > 10000 ? parseInt(m / 10000) + "亿" : parseInt(m) + "万";
      return y;
    },
  },
  methods: {
    add() {
      this.$router.push({ name: "GuidePage" });
    },
    //获取轮播图数据
    getBannerFun() {
      getBanner().then((data) => {
        // 
        if (data.code == 200) {
          this.bannerImgs = data.banners;
        }
      });
    },
    //获取推荐歌单的数据
    getPersonalizedFun() {
      getPersonalized().then((data) => {
        // 
        if (data.code == 200) {
          this.musicList = data.result;
        }
      }).catch(err=>{
        
      })
    },
    //点击 获取歌单详细信息 传参给 组件SongMenu
    getSongdetailFun(id) {
      this.$router.push({name: 'SongMenu',query:{id}});
      
      this.listId=id;
    },
   //获取最新音乐数据
   getNewsongFun() {
     getNewsong().then(data=>{
      //  
       this.newSong=data.result;
     })
   },
    //点击最新音乐
    setId(id,item){
        let index=item.findIndex(item=>item.id==id);
        //记录点击的下标
        this.indexs=index;
        this.playerId=id;
    },
     //音乐关闭 退出音乐控件
    // @item-out="musicOut"
    musicOut(status) {
      if(status) {
        let delayer=setTimeout(() => {
          //让播放控件消失 
          this.playerId=null;
          clearTimeout(delayer);
        }, 2500);

      }
    },
    //获取推荐MV
    getPersonalizedMvFun() {
      getPersonalizedMv().then((data) => {
        // 
        if (data.code == 200) {
          this.musicListMv = data.data;
          this.getSwiper();
        }
      }).catch(err=>{
        
      })
    },
    //传id 给homemv组件
    setMvUrlFun(id,index) {
      this.$router.push({name: 'HomeMv',params: {id,index,musicListMv:this.musicListMv}});
    },
    
    
    getSwiper() {
      //最新MV轮播图
      new Swiper(".swiper-mvbox", {
        autoPlay:{
          disableOnInteraction: false,
        },
        observer:true, //修改swiper自己或者子元素,自动初始化swiper
        observerParents:true,//修改swiper的父元素时,自动初始化swiper
         paginationClickable:true, //
	　　　　// 这样，即使我们滑动之后， 定时器也不会被清除
	　　　　autoplayDisableOnInteraction : false,
        //一次看到几张图
          slidesPerView: 2,
          spaceBetween: 30,
          pagination: {
            // 如果需要分页器
            el: '.swiper-pagination',
            clickable: true,
          },
      });
    },
    //获取电台数据
    getDjHotFun() {
      getDjHot().then((data) => {
        // 
        if (data.code == 200) {
          this.musicListDj = data.djRadios;
        }
      }).catch(err=>{
        
      })
    },
    //显示个人中心 显示隐藏
    showPersonal() {
      this.bool=!this.bool;
    },
    //跳转登录页面
    jumpLogin(){
        let login=window.localStorage.getItem('login');
        //若没登录
        if(!login) {
          // 跳转 登录
            this.$router.push( { path: '/login' });
        }else{
          //跳转 个人中心
            this.$router.push({path:'/userInfo'});
        }
    }
    
  },
  //获取页面给用户展示的数据,在实例
  created() {
    this.getBannerFun();
    this.getPersonalizedFun();
    this.getPersonalizedMvFun();
    this.getDjHotFun();
    this.getNewsongFun();
  },
  //轮播图
  mounted() {
    
    
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/base.less");
.personal {
  position:fixed;
  width:80%;
  left:0;
  top:0;
  z-index:10009;

}
.home-context{
    padding:0 10px;
    padding-top:50px ;
    
  .context-item{
  .context-ul{
    .context-li{
      height:100px;
      // background-color: wheat;
      display:flex;
      align-items: center;
      justify-content: space-between;
      border-bottom:1px solid #cdc9cd;

      .context-img{
        width:90px;
        height:90px;
        border-radius: 8px;
        margin-right: 20px;
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center center;

      }
      .context-p{
        flex:1;
        text-align: left;
        font-size:14px;
        p{
          font-size:16px;
          font-weight: bold;
          padding:10px 0;
          span{
            font-size:14px;
            font-weight: normal;
          }
        }
        span{
          padding:5px;
        }
      }
      
      .context-btn{
        width: 35px;
        font-size: 22px;
        margin-right: 10px;
        color:#cdc9dc;
        i.active{
          color:#e4393c!important;
        }
      }
    }
  }
}
}
.home-dj{
  position: relative;
  top:40px;
}
.home-dj-box{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  padding:0 5px 70px 5px;
  font-size:14px;
  .home-dj-item{
    width:110px;
    margin-bottom: 5px;
    .dj-img{
      background-color: antiquewhite;
      width:110px;
      height:110px;
      overflow: hidden;
      border-radius:50%;
      
    }
    
  }
}
.lemon-title {
  padding-left: 10px;
}
.home-nav {
  position: sticky;
  top: 0;
  z-index: 99;
}
.title {
  color: #000;
  font-weight: bold;
}
.swiper-pagination-bullets {
     bottom:0;
   }
   .swiper-count{
     position: static;
   }
.swiper-home {
  //修改指示器颜色
  --swiper-theme-color:@mainColor;
    position: relative;
    top: 30px;
  .swiper-wrapper>.swiper-slide-item{
    width:180px!important;
    margin-right: 10px!important;
  } 
  .swiper-mv {
    padding: 10px;
  }
  .swiper-mvbox {
    //设置触摸屏用户如何操纵元素的区域 解决滑动报错
     touch-action: none;
    width: 100%;
    overflow: hidden;
  }
  //最新MV
  
    .list-item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 0 5px;
      .list-item-box {
        width: 100%;
        font-size:16px;
        .list-item-txt {
          text-align: center;
          margin-top: 10px;
        }
      }
      
      .list-item-img {
        width: 100%;
        margin-right: 5px;
        position: relative;
        .item-img-span{
          font-size:28px;
          position: absolute;
          top:50%;
          transform:translateY(-50%) ;
          left:45%;
        }
        img {
          // height: 180px;
          width: 100%;
          display: block;
        }
      }
    }

}
img {
  width: 100%;
  display: block;
}

.banner {
  padding-top: 10px;
  background-color: @mainColor;
  height: 134px;
  .banner-item {
    position: relative;
    top: 10px;
    .my-swipe {
      margin: 0 auto;
      width: 96%;
      border-radius: 5px;
      overflow: hidden;
    }
  }
}
.home-list {
  position: relative;
  top: 30px;
  padding: 0 10px;
  .home-title {
    margin-bottom: 20px;
  }
  .content-box {
    display: flex;
    flex-wrap: wrap;

    .content:nth-child(3n) {
      margin-right: 0;
    }
    .content {
      flex: 1 0 30%;
      position: relative;
      margin-right: 5px;
      margin-bottom: 10px;

      .top-box {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 5px;
        font-size: 12px;
        .icon {
          margin: 0 2px;
        }
        .count {
          background-color: transparent;
          color: white;
        }
      }
      .image-box {
        border-radius: 5px;
        text-align: center;
        overflow: hidden;
        img {
          width: 100%;
          display:flex;
          vertical-align: middle;
        }
      }
      .title-box {
        font-size: 14px;
        padding: 2px 5px;
        line-height: 1.5;
        box-sizing: border-box;
      }
    }
  }
}

</style>